<template>
  <el-row>
    <el-col :span="6">
      <h2>欢迎使用后台管理系统</h2>
      <el-image style="width:180px; height:180px" :src="require('@/assets/logo.jpg')"></el-image>
      <p>江苏理工学院提供技术支持</p>
      <p>基于Vue+SpringBoot技术实现</p>
    </el-col>
    <el-col :span="1">
      <el-divider direction="vertical"></el-divider>
    </el-col>
    <el-col :span="6">
      <!-- 登录表单 ref属性(定义引用名字)   model: -->
      <el-form ref="loginForm" :model="loginObject" label-width="80px" label-position="right" :rules="rules">
        <el-form-item label="用户名" style="width:360px" prop="username">
          <el-input v-model="loginObject.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="width:360px" prop="password">
          <el-input type="password" v-model="loginObject.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码" style="width:360px" prop="code">
          <el-input v-model="loginObject.code" style="width:150px; float:left;" maxlength="5"></el-input>
          <el-image :src="captchaImg" class="captchaImg" @click="getCaptcha()"></el-image>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLoginForm('loginForm')">提交</el-button>
          <el-button>忘记密码</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      captchaImg: '',
      //登录对象(登录表单关联对象)
      loginObject: {
        username: '',
        password: '',
        code: '',   //验证码
        key: '', //服务器端存储验证码到redis数据库key
      },
      rules: { //登录表单验证规则
        username: [
          //非空验证
          {required: true, message: '请输入登录的用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入登录的密码', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 5, max: 5, message: '验证码的长度为5个字符', trigger: 'blur'}  //验证输入信息长短
        ]
      }
    }
  },
  created() {  //生命周期钩子函数，Vue实例创建完毕阶段(请求Java服务器验证码)
    this.getCaptcha();
  },
  methods: {
    testJWT() {
      this.$axios.get('/user/list').then((response) => {
        console.log(response.data)
      }).catch(e => {
        console.log(e);
      })
    },
    submitLoginForm(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          this.getCaptcha();
          //username=admin&password=123&code=2fCd5
          this.$axios.post('/login', this.$qs.stringify(this.loginObject))
              .then((response) => {
                //alert('登录成功')
                const jwt = response.headers['token']
                this.$store.commit('SET_TOKEN', jwt)  //调用vuex存储token
                this.$router.push('/index')
              }).catch(error => {
            console.log(error);
          })
        } else {
          return false
        }
      })
    },
    getCaptcha() {
      //请求服务器端获得验证码。/api/captcha 
      this.$axios.get('/api/captcha')
          .then((response) => {
            //获得响应回数据 response.data取到的值就是 服务器端返回Result
            this.captchaImg = response.data.resultdata.captchaImg
            this.loginObject.key = response.data.resultdata.key
          }).catch(error => {
        console.log(error);
      })
    }
  }
}
</script>

<style scoped>
.el-row {
  background: #fafafa;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
}

.el-divider {
  height: 200px;
}

.captchaImg {
  float: left;
  margin-left: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  width: 100px
}
</style>
